<template>
  <div class="resume-preview" :style="{ '--theme-color': themeColors[currentTheme].primary }">
    <div class="resume-header" :style="{ borderColor: themeColors[currentTheme].primary }">
      <div class="header-info">
        <div class="name">{{ parsedData.name || 'xx' }}的简历</div>
      </div>
    </div>

    <div class="resume-section personal-info-section">
      <div class="section-title">个人信息</div>
      <div class="section-content personal-info">
        <div class="info-item" v-if="parsedData.name">
          <span class="info-label">姓名：</span>
          <span class="info-value">{{ parsedData.name }}</span>
        </div>
        <div class="info-item" v-if="parsedData.gender">
          <span class="info-label">性别：</span>
          <span class="info-value">{{ parsedData.gender }}</span>
        </div>
        <div class="info-item" v-if="parsedData.phone">
          <span class="info-label">联系电话：</span>
          <span class="info-value">{{ parsedData.phone }}</span>
        </div>
        <div class="info-item" v-if="parsedData.email">
          <span class="info-label">电子邮件：</span>
          <span class="info-value">{{ parsedData.email }}</span>
        </div>
        <div class="info-item" v-if="parsedData.location">
          <span class="info-label">现居地：</span>
          <span class="info-value">{{ parsedData.location }}</span>
        </div>
        <div class="info-item" v-if="parsedData.ethnic">
          <span class="info-label">民族：</span>
          <span class="info-value">{{ parsedData.ethnic }}</span>
        </div>
        <div class="info-item" v-if="parsedData.political">
          <span class="info-label">政治面貌：</span>
          <span class="info-value">{{ parsedData.political }}</span>
        </div>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.intention && Object.keys(parsedData.intention).length">
      <div class="section-title">求职意向</div>
      <div class="section-content intention-content">
        <div v-for="(value, key) in parsedData.intention" :key="key" class="intention-item">
          <span class="intention-label">{{ key }}：</span>
          <span class="intention-value">{{ value }}</span>
        </div>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.work && parsedData.work.length">
      <div class="section-title">工作经历</div>
      <div class="section-content">
        <div class="exp-item" v-for="(work, idx) in parsedData.work" :key="idx">
          <div class="exp-header">
            <div class="exp-title">{{ work.company }} - {{ work.position }}</div>
            <div class="exp-time">{{ work.time }}</div>
          </div>
          <div class="exp-content">
            <ul v-if="work.description && work.description.length">
              <li v-for="(desc, i) in work.description" :key="i">{{ desc }}</li>
            </ul>
            <p v-else class="empty-tip">暂无工作描述</p>
          </div>
        </div>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.education && parsedData.education.length">
      <div class="section-title">教育经历</div>
      <div class="section-content">
        <div class="exp-item" v-for="(edu, idx) in parsedData.education" :key="idx">
          <div class="exp-header">
            <div class="exp-title">{{ edu.school }} - {{ edu.degree }} - {{ edu.major }}</div>
            <div class="exp-time">{{ edu.time }}</div>
          </div>
          <div class="exp-content" v-if="edu.description">
            <ul v-if="edu.descriptions && edu.descriptions.length">
              <li v-for="(desc, i) in edu.descriptions" :key="i">{{ desc }}</li>
            </ul>
            <p v-else class="study-content">{{ edu.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.internship && parsedData.internship.length">
      <div class="section-title">实习经历</div>
      <div class="section-content">
        <div class="exp-item" v-for="(internship, idx) in parsedData.internship" :key="idx">
          <div class="exp-header">
            <div class="exp-title">{{ internship.company }} - {{ internship.position }}</div>
            <div class="exp-time">{{ internship.time }}</div>
          </div>
          <div class="exp-content">
            <ul v-if="internship.description && internship.description.length">
              <li v-for="(desc, i) in internship.description" :key="i">{{ desc }}</li>
            </ul>
            <p v-else class="empty-tip">暂无实习描述</p>
          </div>
        </div>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.projects && parsedData.projects.length">
      <div class="section-title">项目经历</div>
      <div class="section-content">
        <div class="exp-item" v-for="(project, idx) in parsedData.projects" :key="idx">
          <div class="exp-header">
            <div class="exp-title">{{ project.name }} - {{ project.role }}</div>
            <div class="exp-time">{{ project.time }}</div>
          </div>
          <div class="exp-content">
            <ul v-if="project.description && project.description.length">
              <li v-for="(desc, i) in project.description" :key="i">{{ desc }}</li>
            </ul>
            <p v-else class="empty-tip">暂无项目描述</p>
          </div>
        </div>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.campus && parsedData.campus.length">
      <div class="section-title">校园经历</div>
      <div class="section-content">
        <div class="exp-item" v-for="(campus, idx) in parsedData.campus" :key="idx">
          <div class="exp-header">
            <div class="exp-title">{{ campus.organization }} - {{ campus.role }}</div>
            <div class="exp-time">{{ campus.time }}</div>
          </div>
          <div class="exp-content">
            <ul v-if="campus.description && campus.description.length">
              <li v-for="(desc, i) in campus.description" :key="i">{{ desc }}</li>
            </ul>
            <p v-else class="empty-tip">暂无经历描述</p>
          </div>
        </div>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.skills && parsedData.skills.length">
      <div class="section-title">专业技能</div>
      <div class="section-content">
        <div class="skill-tags">
          <span class="skill-tag" v-for="(skill, idx) in parsedData.skills" :key="idx">
            {{ skill.name }}
            <span v-if="skill.level" class="skill-level">
              <span class="skill-dot active" v-for="n in parseInt(skill.level)" :key="`active-${n}`"></span>
              <span class="skill-dot" v-for="n in (5 - parseInt(skill.level))" :key="`inactive-${n}`"></span>
            </span>
          </span>
        </div>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.certificates && parsedData.certificates.length">
      <div class="section-title">资格证书</div>
      <div class="section-content">
        <ul class="cert-list">
          <li v-for="(cert, idx) in parsedData.certificates" :key="idx">{{ cert }}</li>
        </ul>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.hobbies && parsedData.hobbies.length">
      <div class="section-title">兴趣爱好</div>
      <div class="section-content">
        <ul class="hobby-list">
          <li v-for="(hobby, idx) in parsedData.hobbies" :key="idx">{{ hobby }}</li>
        </ul>
      </div>
    </div>

    <div class="resume-section" v-if="parsedData.evaluation && parsedData.evaluation.length">
      <div class="section-title">自我评价</div>
      <div class="section-content">
        <ul class="eval-list">
          <li v-for="(assessment, idx) in parsedData.evaluation" :key="idx">{{ assessment }}</li>
        </ul>
      </div>
    </div>
    
    <div class="theme-selector">
      <div class="theme-title">主题风格</div>
      <div class="theme-options">
        <div 
          v-for="(theme, index) in themeColors" 
          :key="index" 
          class="theme-option" 
          :class="{ active: currentTheme === index }"
          :style="{ backgroundColor: theme.primary }"
          @click="changeTheme(index)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  data: {
    type: [Object, String],
    required: true
  }
})

// 主题颜色
const themeColors = [
  { primary: '#5ac725', secondary: '#e6f7e1' }, // 绿色
  { primary: '#2196f3', secondary: '#e3f2fd' }, // 蓝色
  { primary: '#ff5722', secondary: '#fbe9e7' }, // 橙色
  { primary: '#9c27b0', secondary: '#f3e5f5' }, // 紫色
  { primary: '#3f51b5', secondary: '#e8eaf6' }, // 靛蓝
  { primary: '#009688', secondary: '#e0f2f1' }  // 青色
]

// 当前主题
const currentTheme = ref(0)

// 切换主题
const changeTheme = (index) => {
  currentTheme.value = index
}

// 解析markdown文本为结构化数据
const parsedData = computed(() => {
  // 如果是对象直接返回
  if (typeof props.data === 'object' && props.data !== null) {
    return props.data
  }
  
  // 如果是markdown字符串，解析它
  if (typeof props.data === 'string') {
    return parseMarkdown(props.data)
  }
  
  return {}
})

// 解析markdown文本
function parseMarkdown(md) {
  const result = {
    name: '',
    gender: '',
    ethnic: '',
    political: '',
    phone: '',
    email: '',
    location: '',
    intention: {},
    work: [],
    education: [],
    internship: [],
    projects: [],
    campus: [],
    skills: [],
    certificates: [],
    hobbies: [],
    evaluation: []
  }
  
  if (!md) {
    return result
  }
  
  try {
    // 提取标题/姓名
    const titleMatch = md.match(/# (.+?)的简历/) || md.match(/# 个人简历/)
    if (titleMatch && titleMatch[1]) {
      result.name = titleMatch[1]
    }

    // 查找所有带编号的一级标题 (## 一、xxx 或 ## 1、xxx 等)
    const sectionTitles = md.match(/## [\d一二三四五六七八九十]+、.+/g) || []

    // 动态处理每个章节
    for (let i = 0; i < sectionTitles.length; i++) {
      const currentTitle = sectionTitles[i]
      const nextTitle = sectionTitles[i + 1]
      
      // 提取当前标题的内容，直到下一个标题或文档结束
      const sectionContent = nextTitle 
        ? md.substring(md.indexOf(currentTitle), md.indexOf(nextTitle))
        : md.substring(md.indexOf(currentTitle))
      
      // 根据标题内容处理不同的章节
      if (currentTitle.includes('个人信息')) {
        processPersonalInfo(sectionContent, result)
      } else if (currentTitle.includes('求职意向')) {
        processJobIntention(sectionContent, result)
      } else if (currentTitle.includes('工作经历')) {
        processWorkExperience(sectionContent, result)
      } else if (currentTitle.includes('教育经历')) {
        processEducation(sectionContent, result)
      } else if (currentTitle.includes('实习经历')) {
        processInternship(sectionContent, result)
      } else if (currentTitle.includes('项目经历')) {
        processProjects(sectionContent, result)
      } else if (currentTitle.includes('校园经历')) {
        processCampusExperience(sectionContent, result)
      } else if (currentTitle.includes('专业技能')) {
        processSkills(sectionContent, result)
      } else if (currentTitle.includes('资格证书')) {
        processCertificates(sectionContent, result)
      } else if (currentTitle.includes('兴趣爱好')) {
        processHobbies(sectionContent, result)
      } else if (currentTitle.includes('自我评价')) {
        processEvaluation(sectionContent, result)
      }
    }
  } catch (error) {
    console.error('解析简历Markdown出错:', error)
  }
  
  return result
}

// 处理个人信息
function processPersonalInfo(content, result) {
  // 提取姓名
  const nameMatch = content.match(/[*-]\s*(?:\*\*)?姓名(?:\*\*)?[：:]\s*(.+)/)
  if (nameMatch) result.name = nameMatch[1].trim()
  
  // 提取性别
  const genderMatch = content.match(/[*-]\s*(?:\*\*)?性别(?:\*\*)?[：:]\s*(.+)/)
  if (genderMatch) result.gender = genderMatch[1].trim()
  
  // 提取民族
  const ethnicMatch = content.match(/[*-]\s*(?:\*\*)?民族(?:\*\*)?[：:]\s*(.+)/)
  if (ethnicMatch) result.ethnic = ethnicMatch[1].trim()
  
  // 提取政治面貌
  const politicalMatch = content.match(/[*-]\s*(?:\*\*)?政治面貌(?:\*\*)?[：:]\s*(.+)/)
  if (politicalMatch) result.political = politicalMatch[1].trim()
  
  // 提取电话
  const phoneMatch = content.match(/[*-]\s*(?:\*\*)?(?:联系电话|电话)(?:\*\*)?[：:]\s*(.+)/)
  if (phoneMatch) result.phone = phoneMatch[1].trim()
  
  // 提取邮箱
  const emailMatch = content.match(/[*-]\s*(?:\*\*)?(?:电子邮件|邮箱)(?:\*\*)?[：:]\s*(.+)/)
  if (emailMatch) result.email = emailMatch[1].trim()
  
  // 提取地址
  const locationMatch = content.match(/[*-]\s*(?:\*\*)?(?:现居地|地址)(?:\*\*)?[：:]\s*(.+)/)
  if (locationMatch) result.location = locationMatch[1].trim()
}

// 处理求职意向
function processJobIntention(content, result) {
  // 提取职位
  const positionMatch = content.match(/[*-]\s*(?:\*\*)?求职岗位(?:\*\*)?[：:]\s*(.+)/)
  if (positionMatch) result.intention['求职岗位'] = positionMatch[1].trim()
  
  // 提取城市
  const cityMatch = content.match(/[*-]\s*(?:\*\*)?意向城市(?:\*\*)?[：:]\s*(.+)/)
  if (cityMatch) result.intention['意向城市'] = cityMatch[1].trim()
  
  // 提取类型
  const typeMatch = content.match(/[*-]\s*(?:\*\*)?求职类型(?:\*\*)?[：:]\s*(.+)/)
  if (typeMatch) result.intention['求职类型'] = typeMatch[1].trim()
  
  // 提取薪资
  const salaryMatch = content.match(/[*-]\s*(?:\*\*)?(?:期望工资|期望薪资)(?:\*\*)?[：:]\s*(.+)/)
  if (salaryMatch) result.intention['期望薪资'] = salaryMatch[1].trim()
}

// 处理工作经历
function processWorkExperience(content, result) {
  // 匹配不同格式的工作经历条目
  // 格式1: ### （一）公司 - 职位（时间）
  // 格式2: ### 公司 - 职位（时间）
  const workFormatRegex = /### (?:（[一二三四五六七八九十\d]+）)?(.+?) - (.+?)（(.+?)）\n([\s\S]*?)(?=###|$)/g
  
  let workMatch
  while ((workMatch = workFormatRegex.exec(content)) !== null) {
    const company = workMatch[1].trim()
    const position = workMatch[2].trim()
    const time = workMatch[3].trim()
    
    const descriptions = workMatch[4]
      .split('\n')
      .filter(line => /^(?:\d+\.|-)\s*/.test(line.trim()))
      .map(line => line.replace(/^(?:\d+\.|-)\s*/, '').trim())
      .filter(desc => desc.length > 0)
    
    result.work.push({
      company,
      position,
      time,
      description: descriptions
    })
  }
}

// 处理教育经历
function processEducation(content, result) {
  // 首先尝试匹配教育经历项目
  const eduItems = content.match(/[*-]\s*\*\*(.+?)\*\* - (.+?) - (.+?)（(.+?)）[\s\S]*?(?=\n[*-]|$)/g) || []
  
  // 如果没有找到教育经历，直接返回
  if (!eduItems || eduItems.length === 0) return
  
  // 处理每个教育经历项目
  for (let i = 0; i < eduItems.length; i++) {
    const item = eduItems[i]
    
    // 提取基本信息
    const basicInfoMatch = item.match(/[*-]\s*\*\*(.+?)\*\* - (.+?) - (.+?)（(.+?)）/)
    if (!basicInfoMatch) continue
    
    const school = basicInfoMatch[1].trim()
    const degree = basicInfoMatch[2].trim()
    const major = basicInfoMatch[3].trim()
    const time = basicInfoMatch[4].trim()
    
    // 提取学习情况
    let description = ''
    let descriptions = []
    
    // 查找学习情况标记
    const descriptionMatch = item.match(/学习情况[：:]([\s\S]+)/)
    if (descriptionMatch) {
      const descText = descriptionMatch[1].trim()
      
      // 按行分割
      const lines = descText.split('\n').map(line => line.trim()).filter(Boolean)
      
      // 处理每一行
      for (const line of lines) {
        // 检查是否是列表项（数字、点、短横线开头）
        if (/^(\d+\.|\d+、|-)\s*/.test(line)) {
          descriptions.push(line.replace(/^(\d+\.|\d+、|-)\s*/, '').trim())
        } else {
          // 不是列表项，作为普通描述处理
          if (line.length > 0) {
            if (description) {
              description += '\n' + line
            } else {
              description = line
            }
          }
        }
      }
    }
    
    // 添加到结果中
    result.education.push({
      school,
      degree,
      major,
      time,
      description,
      descriptions
    })
  }
  
  // 如果上面的方法没有提取到有效的教育经历，尝试备用方案
  if (result.education.length === 0) {
    // 备用方案：直接提取教育经历块中的所有内容
    const educationSection = content.match(/## [一二三四五六七八九十\d]+、教育经历([\s\S]*?)(?=## |$)/)
    if (educationSection && educationSection[1]) {
      const eduBlock = educationSection[1].trim()
      
      // 匹配每个教育经历项
      const eduItemRegex = /- \*\*(.+?)\*\* - (.+?) - (.+?)（(.+?)）([\s\S]*?)(?=- \*\*|$)/g
      let eduMatch
      
      while ((eduMatch = eduItemRegex.exec(eduBlock)) !== null) {
        const school = eduMatch[1].trim()
        const degree = eduMatch[2].trim()
        const major = eduMatch[3].trim()
        const time = eduMatch[4].trim()
        
        let description = ''
        let descriptions = []
        
        const descText = eduMatch[5]
        if (descText) {
          // 查找学习情况部分
          const situationMatch = descText.match(/学习情况[：:]([\s\S]+)/)
          
          if (situationMatch) {
            const situationText = situationMatch[1].trim()
            
            // 按行分割
            const lines = situationText.split('\n').map(line => line.trim()).filter(Boolean)
            
            for (const line of lines) {
              // 检查是否是列表项
              if (/^(\d+\.|\d+、|-)\s*/.test(line)) {
                const cleanLine = line.replace(/^(\d+\.|\d+、|-)\s*/, '').trim()
                descriptions.push(cleanLine)
              } else {
                // 普通描述文本
                if (description) {
                  description += '\n' + line
                } else {
                  description = line
                }
              }
            }
          } else {
            // 没有找到明确的学习情况标记，可能整段都是描述
            description = descText.trim()
          }
        }
        
        result.education.push({
          school,
          degree,
          major,
          time,
          description,
          descriptions
        })
      }
    }
  }
}

// 处理实习经历
function processInternship(content, result) {
  // 匹配实习经历
  const internFormatRegex = /### (?:（[一二三四五六七八九十\d]+）)?(.+?) - (.+?)（(.+?)）\n([\s\S]*?)(?=###|$)/g
  
  let internMatch
  while ((internMatch = internFormatRegex.exec(content)) !== null) {
    const company = internMatch[1].trim()
    const position = internMatch[2].trim()
    const time = internMatch[3].trim()
    
    const descriptions = internMatch[4]
      .split('\n')
      .filter(line => /^(?:\d+\.|-)\s*/.test(line.trim()))
      .map(line => line.replace(/^(?:\d+\.|-)\s*/, '').trim())
      .filter(desc => desc.length > 0)
    
    result.internship.push({
      company,
      position,
      time,
      description: descriptions
    })
  }
}

// 处理项目经历
function processProjects(content, result) {
  // 匹配项目经历
  const projectFormatRegex = /### (?:（[一二三四五六七八九十\d]+）)?(.+?) - (.+?)（(.+?)）\n([\s\S]*?)(?=###|$)/g
  
  let projectMatch
  while ((projectMatch = projectFormatRegex.exec(content)) !== null) {
    const name = projectMatch[1].trim()
    const role = projectMatch[2].trim()
    const time = projectMatch[3].trim()
    
    const descriptions = []
    const descText = projectMatch[4]
    
    // 收集项目描述
    // 匹配列表形式的描述（数字开头或-开头）
    const descLines = descText.split('\n')
    
    descLines.forEach(line => {
      const trimmedLine = line.trim()
      if (/^(?:\d+\.|-)\s*.+/.test(trimmedLine)) {
        descriptions.push(trimmedLine.replace(/^(?:\d+\.|-)\s*/, ''))
      }
    })
    
    result.projects.push({
      name,
      role,
      time,
      description: descriptions
    })
  }
}

// 处理校园经历
function processCampusExperience(content, result) {
  // 匹配校园经历
  const campusFormatRegex = /### (?:（[一二三四五六七八九十\d]+）)?(.+?) - (.+?)（(.+?)）\n([\s\S]*?)(?=###|$)/g
  
  let campusMatch
  while ((campusMatch = campusFormatRegex.exec(content)) !== null) {
    const organization = campusMatch[1].trim()
    const role = campusMatch[2].trim()
    const time = campusMatch[3].trim()
    
    const descriptions = campusMatch[4]
      .split('\n')
      .filter(line => /^(?:\d+\.|-)\s*/.test(line.trim()))
      .map(line => line.replace(/^(?:\d+\.|-)\s*/, '').trim())
      .filter(desc => desc.length > 0)
    
    result.campus.push({
      organization,
      role,
      time,
      description: descriptions
    })
  }
}

// 处理专业技能
function processSkills(content, result) {
  // 提取带级别的技能 格式: 数字、文本（数字）
  const ratedSkillRegex = /(?:\d+\.|-)\s*(.+?)（(\d+)）/g
  let skillMatch
  
  while ((skillMatch = ratedSkillRegex.exec(content)) !== null) {
    result.skills.push({
      name: skillMatch[1].trim(),
      level: skillMatch[2].trim()
    })
  }
  
  // 提取不带级别的技能
  const lines = content.split('\n')
  for (const line of lines) {
    const simpleSkillMatch = line.match(/(?:\d+\.|-)\s*([^（）\n]+)/)
    if (simpleSkillMatch && !line.includes('（')) {
      const skillName = simpleSkillMatch[1].trim()
      // 避免重复添加
      if (skillName && !result.skills.some(s => s.name === skillName)) {
        result.skills.push({
          name: skillName,
          level: '3' // 默认级别为3
        })
      }
    }
  }
}

// 处理证书
function processCertificates(content, result) {
  const certItems = content.match(/(?:\d+\.|-)\s*(.+)/g)
  
  if (certItems) {
    certItems.forEach(item => {
      const certMatch = item.match(/(?:\d+\.|-)\s*(.+)/)
      if (certMatch) {
        result.certificates.push(certMatch[1].trim())
      }
    })
  }
}

// 处理兴趣爱好
function processHobbies(content, result) {
  const hobbyItems = content.match(/(?:\d+\.|-)\s*(.+)/g)
  
  if (hobbyItems) {
    hobbyItems.forEach(item => {
      const hobbyMatch = item.match(/(?:\d+\.|-)\s*(.+)/)
      if (hobbyMatch) {
        result.hobbies.push(hobbyMatch[1].trim())
      }
    })
  }
}

// 处理自我评价
function processEvaluation(content, result) {
  const evalItems = content.match(/(?:\d+\.|-)\s*(.+)/g)
  
  if (evalItems) {
    evalItems.forEach(item => {
      const evalMatch = item.match(/(?:\d+\.|-)\s*(.+)/)
      if (evalMatch) {
        result.evaluation.push(evalMatch[1].trim())
      }
    })
  } else {
    // 如果没有列表格式，尝试提取纯文本作为评价
    const plainTextEval = content.replace(/## [一二三四五六七八九十\d]+、自我评价\n/, '').trim()
    if (plainTextEval) {
      result.evaluation.push(plainTextEval)
    }
  }
}
</script>

<style scoped>
.resume-preview {
  --theme-color: #5ac725;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 24px;
  max-width: 700px;
  margin: 0 auto 30px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.resume-header {
  margin-bottom: 24px;
  border-bottom: 2px solid var(--theme-color);
  padding-bottom: 16px;
}
.header-info {
  text-align: center;
}
.name {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  margin-bottom: 10px;
}
.resume-section {
  margin-bottom: 20px;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--theme-color);
  margin-bottom: 12px;
  padding-left: 8px;
  border-left: 4px solid var(--theme-color);
}
.section-content {
  font-size: 15px;
  color: #333;
  line-height: 1.7;
}
.intention-content {
  display: flex;
  flex-wrap: wrap;
}
.intention-item {
  margin-right: 20px;
  margin-bottom: 8px;
}
.intention-label {
  color: #666;
}
.intention-value {
  font-weight: 500;
}
.exp-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #eee;
}
.exp-item:last-child {
  border-bottom: none;
}
.exp-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.exp-title {
  font-weight: 500;
  color: #333;
}
.exp-time {
  color: #888;
  font-size: 14px;
}
.exp-content ul, .cert-list, .hobby-list, .eval-list {
  padding-left: 18px;
  margin: 8px 0;
}
.exp-content li, .cert-list li, .hobby-list li, .eval-list li {
  margin-bottom: 4px;
}
.empty-tip {
  color: #999;
  font-style: italic;
  font-size: 14px;
}
.skill-tags {
  display: flex;
  flex-wrap: wrap;
}
.skill-tag {
  display: inline-flex;
  align-items: center;
  background: #f5f5f5;
  color: #333;
  border-radius: 4px;
  padding: 4px 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}
.skill-level {
  display: flex;
  margin-left: 6px;
}
.skill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ddd;
  margin: 0 2px;
}
.skill-dot.active {
  background-color: var(--theme-color);
}
.theme-selector {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}
.theme-title {
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
  text-align: center;
}
.theme-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.theme-option {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 0 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.theme-option.active {
  transform: scale(1.2);
  border-color: #fff;
  box-shadow: 0 0 0 2px currentColor;
}
.personal-info-section {
  margin-bottom: 20px;
}
.personal-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.info-item {
  margin-right: 24px;
  margin-bottom: 8px;
  min-width: 180px;
}
.info-label {
  color: #666;
  font-weight: 500;
}
.info-value {
  color: #333;
}
.study-label {
  font-weight: 500;
  color: #666;
  margin-right: 5px;
}
.study-content {
  color: #333;
  white-space: pre-line;
}
</style> 